<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script src="/js/plugins/artDialog/jquery.artDialog.js?skin=opera"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/plugins/iframeTools.js"></script>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <title>叩丁狼教育PSS（演示版）-销售报表</title>
    <style>
        .alt td {
            background: black !important;
        }
    </style>
    <script>
        $(function () {
            $("[name=beginDate]").click(function () {
                WdatePicker({
                    maxDate: $("[name=endDate]").val()
                });
            });
            $("[name=endDate]").click(function () {
                WdatePicker({
                    minDate: $("[name=beginDate]").val()
                });
            });

            //点击图标时打开视图窗口
            $(".chart_btn").click(function () {
                var url = $(this).data("url") + "?" + $("#searchForm").serialize();
                var name = $(this).val();
                //使用dialog弹窗显示图表数据
                $.dialog.open(url, {
                    title: "销售报表-" + name,
                    width: 800,
                    height: 600

                });
            });
        });
    </script>
</head>
<body>
<form id="searchForm" action="#" method="post">
    <div id="container">
        <div class="ui_content">
            <div class="ui_text_indent">
                <div id="box_border">
                    <div id="box_top">搜索</div>
                    <div id="box_center">
                        <fmt:formatDate value="${qo.beginDate}" pattern="yyyy-MM-dd" var="fmtBeginDate"/>
                        <fmt:formatDate value="${qo.endDate}" pattern="yyyy-MM-dd" var="fmtEndDate"/>
                        开始时间
                        <input type="text" class="ui_input_txt02 Wdate" name="beginDate" value="${fmtBeginDate}"/>
                        结束时间
                        <input type="text" class="ui_input_txt02 Wdate" name="endDate" value="${fmtEndDate}"/>
                        客户
                        <select class="ui_select01" name="clientId">
                            <option value="-1">请选择</option>
                            <c:forEach items="${clients}" var="item">
                                <option value="${item.id}" ${item.id == qo.clientId ?'selected':''}>${item.name}</option>
                            </c:forEach>
                        </select>
                        品牌
                        <select class="ui_select01" name="brandId">
                            <option value="-1">请选择</option>
                            <c:forEach items="${brands}" var="item">
                                <option value="${item.id}" ${item.id == qo.brandId ?'selected':''}>${item.name}</option>
                            </c:forEach>
                        </select>
                        分组类型
                        <select class="ui_select01" name="groupBy">
                            <c:forEach items="${groupTypes}" var="item">
                                <option value="${item.key}" ${item.key == qo.groupBy ?'selected':''}>${item.value}</option>
                            </c:forEach>
                        </select>
                        <input type="submit" value="查询" class="ui_input_btn01 "/>
                    </div>
                    <div id="box_bottom">
                        <input type="button" value="柱状图" class="left2right chart_btn"
                               data-url="/chart/saleChartByBar.do">
                        <input type="button" value="饼状图" class="left2right chart_btn"
                               data-url="/chart/saleChartByPie.do">
                    </div>
                </div>
            </div>
        </div>
        <div class="ui_content">
            <div class="ui_tb">
                <table class="table" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
                    <tr>
                        <th>分组类型</th>
                        <th>销售总数量</th>
                        <th>销售总金额</th>
                        <th>毛利润</th>
                    </tr>
                    <tbody>
                    <c:forEach items="${datas}" var="item">
                        <tr>
                            <td>${item.groupType}</td>
                            <td>${item.totalNumber}</td>
                            <td>${item.totalAmount}</td>
                            <td>${item.grossProfit}</td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</form>
</body>
</html>
